<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>指标数据源</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script src="/style/public/publicStyle.js"></script>
</head>
<body >
<div class="weadmin-nav" style="overflow:visible;padding-top:13px">
    <div class="layui-form" lay-filter="sysFormFilter" style="float:right">
        <label class="layui-form-label">系统选择</label>
        <div class="layui-input-inline">
            <select id="sdSys" lay-filter="sdSys" style="width: 200px;height: 30px"></select>
        </div>
    </div>
</div>
<div class="layui-row">
  <table style="width: 100%;height: 100%" >
      <tr>
          <td style="width: 30%;border-bottom:4px solid gray;">
              <div class="layui-form" style="margin: 10px;">
                  <select lay-filter="mainSelectIdFilter" lay-search="" id="mainSelectId" style="width: 90%;height: 23px">
                  </select>
              </div>
          </td>
          <td style="width: 70%;border-left:4px solid gray;">
              <form class="layui-form" action="">
                  <div class="layui-form-item" style="margin: 10px">
                      <div class="layui-inline">
                          <div class="layui-input-inline">
                              <input type="text" name="date" id="dateBegin" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                          </div>
                      </div>
                      <div class="layui-inline">
                          <div class="layui-input-inline">
                              <input type="text" name="date" id="dateEnd" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                          </div>
                      </div>
                      <div class="layui-inline">
                          <button type="button" id="getData" class="layui-btn layui-btn-normal">提数</button>
                      </div>
                  </div>
              </form>
          </td>
      </tr>
      <tr style="">
          <td style="height: 650px;overflow: visible" align="left" valign="top">
              <form class="layui-form" action="">
                  <div class="layui-form-item">
                      <label class="layui-form-label">时间维</label>
                      <div class="layui-input-block">
                          <input type="radio" name="dateType" value="D" title="日" checked lay-filter="dateType">
                          <input type="radio" name="dateType" value="M" title="月" lay-filter="dateType">
                          <input type="radio" name="dateType" value="Q" title="季" lay-filter="dateType">
                          <input type="radio" name="dateType" value="Y" title="年" lay-filter="dateType">
                      </div>
                  </div>
              </form>
              <table class="layui-hide" id="dimTable" lay-filter="dimTableFilter" >
              </table>
          </td>
          <td style="width: 70%;border-left:4px solid gray;" valign="top">

              <table class="layui-table" id="mainTable">
                  <thead></thead>
                  <tbody></tbody>
              </table>
          </td>
      </tr>
  </table>
</div>

<div class="layui-row" id="fldTableDiv" style="display:none;">
    <div class="layui-card-body">
        <table class="layui-table" id="fldTable">
            <thead></thead>
            <tbody></tbody>
        </table>
    </div>
</div>

</body>
<script type="text/html" id="operatorSelect">
    <select name="operator" lay-filter="operator" style="z-index: 100000;position: relative">
        <option value=""></option>
        <option value="=">=</option>
        <option value="in">in</option>
        <option value="not in">not in</option>
    </select>
</script>
<script>
layui.use(['transfer','table','layer', 'laydate'],function () {
    var util = layui.util
        , layer = layui.layer //弹层
        , table = layui.table //表格、
        , form = layui.form
        ,laydate = layui.laydate;
    //日期
    laydate.render({
        elem: '#dateBegin'
    });
    laydate.render({
        elem: '#dateEnd'
    });
    table.render({
        elem: '#dimTable'
        , even: false //开启隔行背景
        , url: ''
        , data:[]
        , defaultToolbar: []
        , page: false
        , cols: [[
            {type:'checkbox'}
            , {field:'idPubfld', title: '维度编码',hide:true}
            , {field: 'naPubfld',title:'维度名称',width: 100}
            , {field: 'filter',title:'过滤',edit: 'text'}
            , {fixed: 'right', title: '操作', align: 'center',width:50, toolbar: '#op'}
        ]]
        , done: function (res, curr, count) {
            $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
        }
    });
    $("#getData").click(function() {
        var startDate = $("#dateBegin").val();
        var endDate = $("#dateEnd").val();
        var idIndex = $("#mainSelectId").val();
        var dims = [];
        var tableData = table.checkStatus('dimTable').data;
        $.each(tableData,function(index,item) {
            dims.push({"idPubfld":item.idPubfld});
        })
        $.ajax({
            url: '/query/baseQuery/baseDmQuery',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data:JSON.stringify({"startDate":startDate,"endDate":endDate,"dimVOList":dims,"idIndexs":idIndex,"dateType":$('input:radio:checked').val()}),
            success: function (msg) {
               var tbody = msg.data.tbody;
                var thead = msg.data.thead;
               var html="<tr>";
                var theads =[],theadsKey=[];
                $.each(thead,function(index,item) {
                    html+="<th>"+item+"</th>";
                    theads.push(item);
                    theadsKey.push(index);
                });
                $("#mainTable thead").html(html+"</tr>");
                html="";
                
                for(var i=0;i<tbody.length;i++) {
                    html+="<tr>";
                    var trData = tbody[i];
                    for(var j=0;j<theadsKey.length;j++) {
                        html+="<td>"+trData[theadsKey[j]]+"</td>";
                    }
                    html+="</tr>";
                }
               $("#mainTable tbody").html(html);
            }
        });
    });
    table.on('tool()', function (obj) { //注：tool 是工具条事件名，mainTableFilter 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent == 'lookDim') {
            indexLay = layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: data.naPubfld,
                area: ['950px', '600px'],
                content: $("#fldTableDiv")//引用的弹出层的页面层的方式加载修改界面表单
            });
            $.ajax({
                url: '/etl/mdDim/findDimData',
                type: 'get',
                data:{"idPubfld":data.idPubfld},
                success: function (msg) {
                    debugger;
                    var tbody = msg.data;
                    var thead = msg.data[0];
                    var html="<tr>";
                    var theadsKey=[];
                    $.each(thead,function(index,item) {
                        html+="<th>"+index+"</th>";
                        theadsKey.push(index);
                    });
                    $("#fldTable thead").html(html+"</tr>");
                    html="";
                    for(var i=0;i<tbody.length;i++) {
                        html+="<tr>";
                        var trData = tbody[i];
                        for(var j=0;j<theadsKey.length;j++) {
                            html+="<td>"+trData[theadsKey[j]]+"</td>";
                        }
                        html+="</tr>";
                    }
                    $("#fldTable tbody").html(html);
                }
            });
        }
    });
    form.on('select(sdSys)',function (data) {
        reloadIndexTable();
        table.reload("dimTable",{data:[]});
        $.ajax({
            url: '/med/mdIndexTbfld/findByModel',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data:JSON.stringify({"idIndex":data.value}),
            success: function (msg) {
                table.reload("dimTable",{data:msg.data});
            }
        });
    });
    form.on('select(mainSelectIdFilter)',function (data) {
        $.ajax({
            url: '/med/mdIndexTbfld/findByModel',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data:JSON.stringify({"idIndex":data.value}),
            success: function (msg) {
                table.reload("dimTable",{data:msg.data});
            }
        });
    });
    $.ajax({
        url: '/med/baseSdItem/findByCdSd?cdSd=sys',
        type: 'get',
        success: function (msg) {
            var sysSelect = $("#sdSys");
            $.each(msg.data,function(index,item) {
                if(index==0) {
                    sysSelect.append('<option selected value="'+item.cd+'">'+item.na+'</option>');
                } else {
                    sysSelect.append('<option value="'+item.cd+'">'+item.na+'</option>');
                }
            });
            form.render('select','sysFormFilter');
            reloadIndexTable();
        }
    });
    var reloadIndexTable = function () {
        $.ajax({
            url: '/med/mdIndex/findByModel',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data:JSON.stringify({"sdSys":$("#sdSys").val()}),
            success: function (msg) {
                var indexSelect = $("#mainSelectId");
                indexSelect.html("");
                indexSelect.append('<option value="">指标搜索</option>');
                $.each(msg.data,function(index,item) {
                    indexSelect.append('<option value="'+item.idIndex+'">'+item.na+'</option>');
                });
                form.render('select');
            }
        });
    }
});
</script>

<script type="text/html" id="op">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lookDim">查看</a>
</script>